<template>
  <div class="learun-chat learun-header--icon-btn" @click="handleOpenChat">
    <div class="learun-header--icon-btn-wraper">
      <i class="learun-icon-message"></i>
      <el-badge v-if="hasMsg" class="badge" is-dot></el-badge>
    </div>

    <!--聊天消息-->
    <l-drawer
      :title="$t('联系')"
      :visible.sync="chatVisible"
      :showOk="false"
      :showClose="false"
      size="360px"
      @opened="handleChatOpened"
    >
      <chat-list ref="chatList" />
    </l-drawer>
  </div>
</template>

<script>
import ChatList from "./chatList.vue";
export default {
  name: "chat",
  components: {
    ChatList,
  },
  data() {
    return {
      chatVisible: false,
    };
  },
  computed: {
    hasMsg() {
      return this.$store.state.im.hasNoReadChatList;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      // 监听消息事件
      this.lr_OnEvent("learun-im-chat-message", (data) => {
        data.myUserId = this.loginInfo.f_UserId;
        this.$store.dispatch("im/revChatMsg", data);
      });
      // 刷新消息列表
      this.$store.dispatch("im/refreshChat");
    },
    // 内部聊天
    handleOpenChat() {
      this.chatVisible = true;
    },
    handleChatOpened() {
      this.$refs.chatList && this.$refs.chatList.refresh();
    },
  },
};
</script>
<style lang="scss" scoped>
.learun-chat {
  position: relative;
  .badge {
    display: block;
    position: absolute;
    top: -2px;
    right: 8px;
  }
}
</style>
